Spreadsheet Powered Portfolio

For the past few weeks I have been updating my frontend web skills. While building an EmberJS+Bootstrap based portfolio, I came across TimelineJS which loads data from Google Spreadsheets! It was the first time I had seen such a trick, and naturally I wanted to figure out how it works.

I did some research and found that it’s as simple as making a JSONP request; just replace the cryptic portion of the URL below with your document’s key. Hint: your document’s key is the part between key=…& in the address bar while you’re looking at the document.

This translates pretty simply into this jQuery snippet:

$.ajax({
  url: "https://spreadsheets.google.com/feeds/cells/0AlNlwgTVXeETdEozaVRfZ0Itb0lvanZFMUFFTkg4RGc/od6/public/basic", 
  data: {alt: "json-in-script"}, 
  dataType: 'jsonp'}
).then(function(resp) {

From there, you can do as you wish with the cells in the response!

A little more info:

https://developers.google.com/gdata/samples/spreadsheet_sample